<template>
	<!-- 我的-系统服务-意见反馈 -->
	<view class="Feedback public">
		<view class="main">
			<!-- 反馈类型 -->
			<view class="typesOf">
				<!-- 头部 -->
				<view class="title">
					<view class="">
						<image src="../../../static/my/customerService/xing.png" mode=""></image>
					</view>
					<view class="star">
						*
					</view>
					<view class="">
						反馈类型
					</view>
				</view>
				<view class="typesOf-main">
					<!-- <uni-data-checkbox mode="tag" v-model="checkbox4" :localdata="typesOf"
						selectedColor='#F14500'>
					</uni-data-checkbox> -->
					<view class="typesOf-main-item" :class="{'typesOf-main-itemSelected': typesOfNum == index}"
						v-for="(item,index) in FeedbackTypeArr" :key="index" @click="typesOf(index)">
						{{item}}
					</view>
				</view>
			</view>
			<!-- 反馈内容 -->
			<view class="centent">
				<!-- 头部 -->
				<view class="title">
					<view class="">
						<image src="../../../static/my/customerService/type.png" mode=""></image>
					</view>
					<view class="star">
						*
					</view>
					<view class="">
						反馈内容
					</view>
				</view>
				<!--  -->
				<view class="centent-main">
					<textarea placeholder="请输入您的问题~~~" v-model="content"></textarea>
				</view>
			</view>
			<!-- 上传凭证 -->
			<view class="voucher">
				<!-- 头部 -->
				<view class="title">
					<view class="">
						<image src="../../../static/my/customerService/shang.png" mode=""></image>
					</view>
					<view class="">
						上传凭证
					</view>
				</view>
				<!-- @success="onSuccess" -->
				<!-- @progress="progress" @success="success" @fail="fail"  v-model="feedbackimg" -->
				<view class="voucher-main">
					<uni-file-picker limit="5" :imageStyles="imageStyles" @select="select">
						<uni-icons type="camera" size="30"></uni-icons>
					</uni-file-picker>
				</view>
			</view>
			<!-- 立即提交 -->
			<view class="buttonBox">
				<button @click="SubmitNow">立即提交</button>
			</view>
		</view>
	</view>
</template>

<script>
	const $api = require('@/utils/request.js').API
	export default {
		data() {
			return {
				checkbox4: '',
				typesOfNum: 0,
				FeedbackTypeArr: [],
				content: '',
				feedbackimg: [],
				imageStyles: {
					width: 64,
					height: 64,
				},
				
			}
		},
		onLoad() {
			this.FeedbackType()
		},
		methods: {
			FeedbackType() {
				$api.postFeedbackType({}).then(res => {
					this.FeedbackTypeArr = res.data.data
				})
			},
			SubmitNow() {
				if(!this.content) {
					uni.showToast({
						title:'反馈内容不能为空呦',
						icon:'none',
						duration:2000
					})
				} else {
					$api.postFeedbackSubmitTo({
						token: uni.getStorageSync('token'),
						content: this.content,
						type: this.FeedbackTypeArr[this.typesOfNum],
						// image: 'http://songcan.xing-peng.com/' + this.feedbackimg.data.pic_path
						image: this.$image + this.feedbackimg.data.pic_path
					}).then(res => {
						uni.showToast({
							title:'提交成功，请勿重复提交！',
							icon:'none',
							duration:2000
						})
						this.feedbackimg=[]
						this.typesOfNum = 0
						this.content = ''
					})
				}
			},
			typesOf(index) {
				this.typesOfNum = index
			},
			// 获取上传状态
			select(e) {
				uni.uploadFile({
					url: 'https://songcan.xyct1688.com/api/upload/feedbackimg',
					filePath: e.tempFilePaths[0],
					name: 'file',
					formData: {
						'user': 'test'
					},
					success: (uploadFileRes) => {
						this.feedbackimg = JSON.parse(uploadFileRes.data)
					}
				});
			},
			// // 获取上传进度
			// progress(e) {
			// },

			// // 上传成功
			// success(e) {
			// },

			// // 上传失败
			// fail(e) {
			// }
		}
	}
</script>

<style lang="less" scoped>
	.Feedback {
		position: relative;
		background: white;

		.main {
			width: 690rpx;
			margin: auto;
		}

		// 头部
		.title {
			display: flex;
			align-items: center;
			// height: 100rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 300;
			color: #333333;
			line-height: 96rpx;

			image {
				width: 30rpx;
				height: 32rpx;
				padding-right: 17rpx;
			}

			// *
			.star {
				// padding-left: 17rpx;
				padding-right: 9rpx;
			}
		}

		// 反馈类型
		.typesOf {
			// width: 690rpx;
			// height: 1rpx;
			// padding-bottom: 40rpx;
			padding-bottom: 17rpx;
			border-bottom: 1px solid #EAEAEA;

			.typesOf-main {
				display: flex;
				// justify-content: space-around;
				flex-wrap: wrap;

				.typesOf-main-item {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 150rpx;
					height: 54rpx;
					border: 1px solid #EAEAEA;
					border-radius: 6rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 300;
					color: #666666;
					margin: 0 15rpx 23rpx 9rpx;
				}

				.typesOf-main-itemSelected {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 150rpx;
					height: 54rpx;
					border: 1px solid #F14500;
					border-radius: 6rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 300;
					color: #F14500;
					margin: 0 15rpx 23rpx 9rpx;
				}

				.icon {
					position: absolute;
					width: 70rpx;
					height: 70rpx;
					text-align: right;
					top: 0;
					right: 0;
					color: white;
					background: #F14500;
					-webkit-clip-path: polygon(59% 1%, 100% 41%, 100% 0);
					clip-path: polygon(59% 1%, 100% 41%, 100% 0);
				}
			}
		}

		// 反馈内容
		.centent {
			padding-top: 20rpx;

			.centent-main {
				textarea {
					// width: 665rpx;
					width: 633rpx;
					// height: 274rpx;
					height: 244rpx;
					background: #F5F5F5;
					border: 1px solid #EAEAEA;
					border-radius: 6rpx;
					margin: auto;
					padding-left: 32rpx;
					padding-top: 30rpx;
					// padding: 30rpx 32rpx;
				}
			}
		}

		// 上传凭证
		.voucher {
			.voucher-main {
				// .uni-file-picker {
				// 	width: 120rpx;
				// 	height: 120rpx;
				// }
			}
		}

		// 立即提交
		.buttonBox {
			position: absolute;
			width: 630rpx;
			height: 88rpx;
			left: 60rpx;
			bottom: 0;
			margin: auto;

			button {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				background: #F14500;
				border-radius: 44rpx;
			}
		}
	}
</style>